---
import { Icon } from "astro-icon/components";
---
<section class="bottom">
    <aside>
    <svg
        width="50"
        height="50"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
        fill-rule="evenodd"
        clip-rule="evenodd"
        class="fill-current"
      >
        <path
          d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"
        ></path>
      </svg>
      <p>
        Powered by <a href="" target="_blank" class="font-bold">Ice</a>
        <br />
        Copyright © <a href= target="_blank" class="font-bold"></a>
        {new Date().getFullYear()} - All right reserved
      </p>
    </aside>
    <div class="social">
        <p class="social-label">SOCIAL</p>
        <div class="social-icons">
        <a href="#"><svg><use xlink:href="#icon-coffee"/></svg></a>
        <a href="#"><svg><use xlink:href="#icon-github"/></svg></a>
        <a href="#"><svg><use xlink:href="#icon-bilibili"/></svg></a>
        <a href="#"><svg><use xlink:href="#icon-twitter"/></svg></a>
    </div>
    </div>
</section>
<style>
  .bottom {
  display: flex;
  flex-direction: row; 
  align-items: center; 
  gap: 10rem; 
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.06);
  padding: 32px 28px;
  margin-bottom: 32px;
}
/* 左侧版权信息 */
.bottom aside {
  align-items: center;
  gap: 1rem;
}
.bottom aside p {
  margin: 0;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.6;
}
.bottom aside a {
  color: #2563eb; /* 链接颜色 */
  font-weight: bold;
  text-decoration: none;
  transition: color 0.2s;
}

.bottom aside a:hover {
  color: #1e40af; /* 悬停颜色 */
}

/* 右侧社交图标 */
.social {
  display: flex;
  gap: 0.5rem; /* 图标间距 */
  flex-direction: column;
}

.social a {
  color: #555; /* 图标默认颜色 */
  transition: transform 0.2s, color 0.2s;
}

.social a:hover {
  color: #000; /* 悬停颜色 */
  transform: scale(1.1); /* 悬停放大效果 */
}

.social svg {
  width: 24px;
  height: 24px;
  fill: currentColor; /* 继承父元素颜色 */
}
.social-label {
  margin: 0;
  color: #333;
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase; /* 可选：转为大写 */
}
.social-icons {
  display: flex;
  gap: 1.5rem;
}


</style>